[#ftl]
[#--
 transition: [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]* 
 --]
[@define "agile.TransitionEditor","agile.MultiValueMetadataEditor"][#--transition: property duration timing-function delay--]		
    [#assign templateString]	
	<form style="background-color:#afeeee">
		<div data-dojo-type="agile.MultiSelectEditorX" data-dojo-attach-point="selector">
		 	<table cellspacing="5px"><tbody> 		
			 	<tr>
			 		<td title="{i18n_transition_property_tooltip}" class="tooltip">{i18n_transition_property}</td>
			 		<td><div data-dojo-type='agile.NumberComboBox' class="meditor" name="transitionProperty" htmlName="transition-property"  width="120px" options="all,none,height,width,background,background-color,border-color,color,word-spacing,width,vertical-align,top,right,bottom,left,padding,outline-width,margin,min-width,min-height,max-width,max-height,line-height,height,border-width,border-spacing,background-position,*" defValue="none" required="true"></div></td>	 		
			 		<td title="{i18n_transition_duration_tooltip}" class="tooltip">{i18n_transition_duration}</td>
					<td><div data-dojo-type='agile.NumberComboBox' class="meditor" name="transitionDuration" htmlName="transition-duration" options="+0" unit="s" defValue="0s" required="true"></div></td>
				</tr>	 	
				<tr>
					<td nowrap="true" title="{i18n_transition_timing_function_tooltip}" class="tooltip">{i18n_transition_timing_function}</td>
					<td><div data-dojo-type='agile.NumberComboBox' class="meditor" name="transitionTimingFunction" htmlName="transition-timing-function" width="120px" options="ease,ease-in,ease-out,ease-in-out,linear" defValue="ease-in" required="true"></div></td>
					<td title="{i18n_transition_delay_tooltip}" class="tooltip">{i18n_transition_delay}</td>
					<td><div data-dojo-type='agile.NumberComboBox' class="meditor" name="transitionDelay" htmlName="transition-delay" options="+0" unit="s" defValue="0s" required="true"></div></td>
				</tr>	
		 	</tbody></table>
	 	</div>
	 </form> 
 	[/#assign]
 	templateString:"${templateString?js_string}"	
 	,name:"transition",htmlName:"transition"
 	,propertyNames:["transition-property","transition-duration","transition-timing-function","transition-delay"]	
 	 ,init:function(){
 		this.inherited(arguments); 	
// 		TODO
// 		agile.onEnterKeyPress(this.meditors["transition-delay"],this,function(){
// 			this.meditors["transition-delay"].blur();//blur to trigger the onChange event
//// 		agile.onEnterKeyPress(this.selector,this,function(){
// 			var selector = this.selector;
// 			window.setTimeout(function(){
// 				selector.addOption();
// 			},100);
// 		});	
 	 }
 	 ,getKey:function(){
		 return this.meditors["transition-property"].get("value");
	 }
 	 ,processBeforeAdd:function(){
 		var property = this.meditors["transition-property"].get("value");
// 		//console.log("@@@@@@@property=",property);
 		if(property == "all" || property == "none"){
 			this.selector.reset1("value",this.valueToString()[1]);
 			return false;
 		}else{
 			var value = this.selector.get("value");
// 			//console.log("@@@@@@@old value=",value);
 			if(value.indexOf("all") != -1 || value.indexOf("none") != -1){
// 				//console.log("@@@@@@@reset null");
 				this.selector.reset1("value",this.valueToString()[1]);
 				return false;
 			}
 		}
 		return true;
	 }

[/@]
